<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link href="../css/mui.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="../css/mescroll.min.css"/>

      <style>
          html,body{
              height: 100%;
              /*overflow: auto;*/
          }
          .mui-content {
            background-color: #fff;
          }
          .mui-table-view {
            margin: 10px 0px;
            /*border: 1px solid #ccc;*/
            /*border-bottom: 0;*/
            padding: 0px 4px;
          }
          /*.mui-table-view:last-child {
            margin-bottom: 0;
            background-color: red;
          }*/
          .tableListone {
            display: inline-block;
            /*padding: 4px 0px;*/
          }
          .tableListtwo {
            display: inline-block;
            padding-left: 15px;
          }
          .tableLine {
            padding: 4px 0px;
            clear: both;
          }
          .normal {
            color: green;
          }
          .abnormal {
            color: red;
          }
      </style>
  </head>
  <body>
    <div id="main">
      <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="mescroll" id="mescroll">
          <!--数据列表-->
          <ul class="mui-table-view-chevron" id="tabview">
          </ul>
        </div>
      </div>
    </ul>
    </div>
  </body>
  <script id="template" type="text/x-dot-template">
  {{ for (var key in it) { }}
  <div class="mui-table-view">
    <div class="tableLine">
      <span style="float: left; font-weight: bold;">{{=it[key].PlateNumber}}</span>
      <img id="imgs" tapmode="" onclick="openActDetail('{{=it[key].id}}')"  style="float: left; padding-left: 20px;" src="../image/baibi.png">
    </div>
     <div class="tableLine">
      {{? it[key]['Departure-Knocking-OffTime'] === '' || it[key]['Departure-Knocking-OffTime'] == null}}
       <span class="tableListone">Departure-Knocking-OffTime：</span> <span class="abnormal">No Data</span>
        {{??}}
      <span class="tableListone">Departure-Knocking-OffTime：</span> <span>{{=it[key]['Departure-Knocking-OffTime']}}</span>
      {{?}}
     </div>
     <div class="tableLine">
       <span class="tableListone">Organization：</span> <span>{{=it[key].Organization}}</span>
     </div>
    <div class="tableLine">
    {{? it[key].TimeoutParkingTimes === '' || it[key].TimeoutParkingTimes == null}}
      <span class="tableListone">Timeout Parking：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Timeout Parking：</span> <span class="abnormal">{{=it[key].TimeoutParkingTimes}}</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].OverspeedingTime === '' || it[key].OverspeedingTime == null }}
      <span class="tableListone">OverspeedingTime：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">OverspeedingTime：</span> <span class="abnormal">{{=it[key].OverspeedingTime}}</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].Drivingmileage === '' || it[key].Drivingmileage == null }}
      <span class="tableListone">Driving mileage：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Driving mileage：</span> <span>{{=it[key].Drivingmileage}}</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].AmountofBinsCleaned === '' || it[key].AmountofBinsCleaned == null }}
      <span class="tableListone">Amount of Bins Cleaned：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Amount of Bins Cleaned：</span> <span class="abnormal">{{=it[key].AmountofBinsCleaned}}</span>
      {{?}}
    </div>
    <div class="tableLine">
      {{? it[key].LastOnlineTime === '' || it[key].LastOnlineTime == null }}
      <span class="tableListone">Last on Line Time：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Last Online Time：</span> <span>{{=it[key].LastOnlineTime}}</span>
      {{?}}
    </div>
  </div>
  {{ } }}
  </script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mescroll.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>

<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/ajax.js"></script>
<script type="text/javascript">
  apiready = function(){
        var tabview = $api.byId('tabview');
        var imgs = $api.byId('imgs');
        var template = $api.byId('template');
        var interText = doT.template(template.innerHTML);
        let number =  api.pageParam.number;
        var org = null;
        if (api.pageParam.org === '') {
            org = query.Org
        } else {
          org = api.pageParam.org
        }
        // var number  = null;
        if (number === 'PlateNumber') {
          number = '';
        } else {
          number = number;
        }
        function loadMore(page) {
          loadMores(mescroll, org, number, interText, page.num, page.size, function (curPageData) {
            mescroll.endByPage(page.size, curPageData.length);
          });
        }
          //  初始化
          var mescroll = new MeScroll("mescroll", {
            //第一个参数"mescroll"对应上面布局结构div的id
            //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
            //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
            down: {
              use: false
            },
            up: {
              auto: true,
              callback: loadMore, //上拉加载的回调
              noMoreSize: 5,
              htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">Loading..</p>',
              isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
            }
        });
      };
  </script>
  </html>
